<template>
    <div class="com__box" :style="{ width: size, height: size }">
        <div
            class="loading"
            :style="{ width: size, height: size, border }"
        ></div>
    </div>
</template>

<script lang="ts" setup>
    import { computed } from "vue"
    const props = defineProps<{
        size?: string
        color?: string
        borderWidth?: string
    }>()

    const border = computed(() => {
        return `${props.borderWidth ? props.borderWidth : "0.1rem"} solid ${
            props.color ? props.color : "black"
        }`
    })
</script>

<style lang="scss" scoped>
    .com__box {
        width: 2rem;
        height: 2rem;
    }
    .loading {
        position: relative;
        width: 2rem;
        height: 2rem;
        border: 0.1rem solid #000;
        border-top-color: rgba(0, 0, 0, 0.2) !important;
        border-right-color: rgba(0, 0, 0, 0.2) !important;
        border-bottom-color: rgba(0, 0, 0, 0.2) !important;
        border-radius: 100%;

        animation: circle infinite 0.75s linear;
    }

    @keyframes circle {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
